<template>
  <div id="integralMarketTop">
    <div class="search-box">
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="统计时间">
          <el-select
            v-model="latelyData"
            placeholder="请选择"
            @change="searchSelect"
          >
            <el-option
              v-for="item in lateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="latelyData === 'sevenDays'">
          <span> {{ formInline.startTime }}至{{ formInline.endTime }}</span>
        </el-form-item>

        <el-form-item v-if="latelyData === 'thirtyDays'">
          <span> {{ formInline.startTime }}至{{ formInline.endTime }}</span>
        </el-form-item>
        <el-form-item prop="customValue" v-if="latelyData === 'customDate'">
          <el-date-picker
            v-model="customValue"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            :picker-options="pickerTopDataDay"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { dateRangeMixins } from '@/mixins/dateRange'
import { getBeforDate } from '@utils/pubFunction'
import * as moment from 'moment'
export default {
  name: 'intergralDataTopSearch',
  msg: '积分统计-顶部时间查询',
  mixins: [dateRangeMixins],
  props: {
    formInline: {
      type: Object,
      default: function() {
        return {
          // 搜索条件
          channel: '', //终端类型 APP PC H5
          days: 0, //天数
          startTime: '', // 开始时间
          endTime: '' // 结束时间
        }
      }
    },
    fromCom: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      latelyData: 'sevenDays', //选中的时间
      customValue: [], //自定义时间
      lateList: [
        {
          value: 'sevenDays',
          label: '最近七天'
        },
        {
          value: 'thirtyDays',
          label: '最近三十天'
        },
        {
          value: 'customDate',
          label: '自定义'
        }
      ], //事件类型
      startTime: '', //开始时间
      endTime: '', //结束时间
      type: '',
      period: '',
      rules: {
        customValue: { type: 'array' }
      },
      pickerTopDataDay: {
        disabledDate(time) {
          //昨天之后不可选
          const yesterday = new Date() - 3600 * 1000 * 24 * 1
          return time.getTime() > yesterday
        }
      },
      pickerOtherDay: {
        disabledDate(time) {
          //今天之后不可选
          return time.getTime() > Date.now()
        }
      }
    }
  },
  watch: {
    latelyData: {
      handler(newVal, oldVal) {
        if (newVal != 'customDate' && newVal.length > 1) {
          this.customValue = []
          // this.toSearch('ruleForm')
        }
      },
      deep: true
    },
    customValue: {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 1 && this.latelyData==='customDate') {
          this.formInline.startTime = newVal[0]
          this.formInline.endTime = newVal[1]
          this.toSearch('ruleForm')
        } 
      },
      deep: true
    }
  },
  mounted() {
    this.searchSelect()
  },
  methods: {
    searchSelect(value) {
      //当前时间
      // const data = moment(new Date()).format('YYYY-MM-DD')

      //最近七天时间
      if (value === undefined || value === 'sevenDays') {
        //指定开始时间
        this.formInline.startTime = moment(
          new Date().getTime() - 7 * 1000 * 24 * 60 * 60
        ).format('YYYY-MM-DD')

        //指定结束时间
        this.formInline.endTime = moment(
          new Date().getTime() - 1 * 1000 * 24 * 60 * 60
        ).format('YYYY-MM-DD')
        this.formInline.days = -7
        this.toSearch('ruleForm')
      }
      //最近30天
      if (value === 'thirtyDays') {
        //指定开始时间
        this.formInline.startTime = moment(
          new Date().getTime() - 30 * 1000 * 24 * 60 * 60
        ).format('YYYY-MM-DD')
        //指定结束时间
        this.formInline.endTime = moment(
          new Date().getTime() - 1 * 1000 * 24 * 60 * 60
        ).format('YYYY-MM-DD')
        this.formInline.days = -30
        this.toSearch('ruleForm')
      }
    },

    /*搜索-执行的方法*/
    searchFunc() {
      const { days, startTime, endTime } = this.formInline
      let obj = {}
      if (this.latelyData === 'sevenDays') {
        obj = { days, startTime, endTime }
      } else if (this.latelyData === 'thirtyDays') {
        obj = { days, startTime, endTime }
      } else {
        obj = { startTime, endTime }
      }
      this.$emit('toSearch', obj)
    },

    /* 搜索 */
    toSearch(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchFunc()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#integralMarketTop {
  margin-left: 10px;
  .search-box {
    margin-bottom: 0 !important;
    padding-left: 0px !important;
  }
  .search-box .data-input .el-input__inner {
    padding-left: 30px !important;
  }
  .el-radio-button__inner {
    padding: 8px 20px;
  }
  .date-btn {
    float: right;
    margin-right: 30px;
  }
}
</style>
